<template>
    <div>
        <div>
            <el-tabs class="bao" type="border-card">
                <el-tab-pane>
                    <span slot="label"><i class="el-icon-date"></i> 日报</span>
                    <div style="margin-top: 40px;margin-left: 120px">
                        <i class="el-icon-edit">
                            <el-button type="text"  @click="isShow=true" style="font-size: 23px;color: #2c3e50"><a>写日报</a></el-button>
                        </i>
                    </div>
                    <div style="margin-top: -33px;margin-left: 450px">
                        <el-link style="color: darkgray;font-size: 25px" disabled>
                            <i class="el-icon-upload2">看上司</i>
                        </el-link>
                    </div>
                    <div style="margin-top: -33px;margin-left: 800px">
                        <el-link style="color:black;font-size: 25px">
                            <i class="el-icon-download">看下级</i>
                        </el-link>
                    </div>
                    <div style="margin-left: 300px;margin-top: 30px">
                        <el-link style="color: darkturquoise;font-size: 17px">
                            <i class="el-icon-date">查看提交情况</i>
                        </el-link>
                    </div>
                    <div style="margin-left: 440px;margin-top: -30px">
                        <el-link style="color: darkturquoise;font-size: 17px">
                            <i class="el-icon-s-management">汇总</i>
                        </el-link>
                    </div>
                    <div style="margin-left: 510px;margin-top: -30px">
                        <el-link style="color: darkturquoise;font-size: 17px">
                            <router-link :to="{path:'/rzb'}">
                                <i class="el-icon-search" style="color:darkturquoise ">日报查询</i>
                            </router-link>
                        </el-link>
                    </div>
                    <div style="margin-left: 620px;margin-top: -30px">
                        <el-link style="color: darkturquoise;font-size: 17px">
                            <i class="el-icon-download">日报导出</i>
                        </el-link>
                    </div>
                </el-tab-pane>
                <el-tab-pane label="周报">
                    <div style="margin-top: 40px;margin-left: 120px">
                        <i class="el-icon-edit">
                            <el-button type="text" @click="isShow=true" style="font-size: 23px;color: #2c3e50"><a>写周报</a></el-button>
                        </i>
                    </div>
                    <div style="margin-top: -33px;margin-left: 450px">
                        <el-link style="color: darkgray;font-size: 25px" disabled>
                            <i class="el-icon-upload2">看上司</i>
                        </el-link>
                    </div>
                    <div style="margin-top: -33px;margin-left: 800px">
                        <el-link style="color:black;font-size: 25px">
                            <i class="el-icon-download">看下级</i>
                        </el-link>
                    </div>
                    <div style="margin-left: 410px;margin-top: 30px">
                        <el-link style="color: darkturquoise;font-size: 17px">
                            <i class="el-icon-date">查看提交情况</i>
                        </el-link>
                    </div>
                    <div style="margin-left: 550px;margin-top: -30px">
                        <el-link style="color: darkturquoise;font-size: 17px">
                            <i class="el-icon-s-management">汇总</i>
                        </el-link>
                    </div>
                </el-tab-pane>
                <el-tab-pane label="月报">
                    <div style="margin-top: 40px;margin-left: 120px">
                        <i class="el-icon-edit">
                            <el-button type="text" @click="isShow=true" style="font-size: 23px;color: #2c3e50"><a>写月报</a></el-button>
                        </i>
                    </div>
                    <div style="margin-top: -35px;margin-left: 450px">
                        <el-link style="color: darkgray;font-size: 25px" disabled>
                            <i class="el-icon-upload2">看上司</i>
                        </el-link>
                    </div>
                    <div style="margin-top: -33px;margin-left: 800px">
                        <el-link style="color:black;font-size: 25px">
                            <i class="el-icon-download">看下级</i>
                        </el-link>
                    </div>
                    <div style="margin-left: 410px;margin-top: 30px">
                        <el-link style="color: darkturquoise;font-size: 17px">
                            <i class="el-icon-date">查看提交情况</i>
                        </el-link>
                    </div>
                    <div style="margin-left: 550px;margin-top: -30px">
                        <el-link style="color: darkturquoise;font-size: 17px">
                            <i class="el-icon-s-management">汇总</i>
                        </el-link>
                    </div>
                </el-tab-pane>
            </el-tabs>
            <div id="echartsBarDemo" style="border:1px solid black;width: 450px;height: 460px;margin-left: 297px;margin-top: 52px;">

            </div>
            <div class="tu-2">
                <el-select v-model="workvalue" @change="yxllk" style="width: 400px;margin-top: 50px;margin-left: 320px" placeholder="请选择">
                    <el-option
                            v-for="item in workoptions"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                    </el-option>
                </el-select>
            </div>
        </div>
        <!--        详情-->
        <div class="wainew" v-show="isShow">
            <div class="newcontract">
                <div class="el-card__body">
                    <div class="el-head">
                        <div class="biaoti">员工日志<i class="el-icon-close" @click="quxiao()"></i></div>
                    </div>
                    <div class="portlet-body">
                        <div class="section-header">
                            <div class="section-mark" style="margin-left: -10px"></div>
                            <div class="section-title" >基本信息</div>
                        </div>
                        <el-form :model="ruleForm"   :rules="rules"  label-width="100px" label-position="top" class="demo-ruleForm">
                            <el-form-item label="员工姓名" style=" padding-right: 80px;">
<!--                                <el-select v-model="ruleForm.empId"  style="width: 355px;" value-key="ygId">-->
<!--                                    <el-option v-for="item in options" :key="item.ygId" :label="item.yname" :value="item"></el-option>-->
<!--                                </el-select>-->
                            </el-form-item>
                            <el-form-item label="主题" prop="rzZhuti" style=" padding-right: 80px;">
                                <el-input size="small" v-model="ruleForm.rzZhuti" style="width: 355.5px;"></el-input>
                            </el-form-item>
                            <el-form-item label="点评状态" prop="rzDpzt" >
                                <el-radio v-model="ruleForm.rzDpzt" :disabled="true" label="未点评">未点评</el-radio>
                                <el-radio v-model="ruleForm.rzDpzt" :disabled="true" label="已点评">已点评</el-radio>
                            </el-form-item>
                            <el-form-item label="类型" prop="rzLx"  style=" padding-right: 80px;">
                                <el-select v-model="ruleForm.rzLx" placeholder="请选择日志类型" style="width: 355px;">
                                    <el-option
                                            v-for="item in options"
                                            :key="item.value"
                                            :label="item.label"
                                            :value="item.value">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="内容" prop="rzNeirong" style=" padding-right: 80px;">
                                <el-input size="small" v-model="ruleForm.rzNeirong" style="width: 355.5px;"></el-input>
                            </el-form-item>
                            <el-form-item label="录入时间" prop="rzCjtime" style=" padding-right: 80px;">
                                <el-date-picker type="date" placeholder="选择日期"
                                                value-format="yyyy-MM-dd" format="yyyy-MM-dd"
                                                v-model="ruleForm.rzCjtime"  style="width: 355.5px;"></el-date-picker>
                            </el-form-item>
                        </el-form>
                    </div>
                    <div class="handle-bar">
                        <el-button size="mini"  class="anniu" @click="quxiao()">取消</el-button>
                        <el-button size="mini" type="primary"  @click="xzkhts()"  >确认加入</el-button>
                    </div>
                </div>
            </div>
        </div>
    </div>

</template>
<script>
    export default {
        name: "Lrizizhu",
        data() {
            return {
                workoptions:[
                    {value: '日志类型分布', label: '日志类型分布'},
                    {value: '人员日志数量分布', label: '人员日志数量分布'},
                ],
                workvalue:'日志类型分布',
                ruleForm:{
                    empId:{
                        empId:'2',
                        empName:'全文',
                    },
                    rzId:0,
                    rzCjtime:'',
                    rzZhuti:'',
                    rzLx:'',
                    rzDpzt:'未点评',
                    rzNeirong:''
                },
                rules: {
                    empId: [
                        {required: true, message: '请选择员工', trigger: 'blur'}
                    ],
                    rzCjtime: [
                        {type:"string",required: true, message: '请选择时间', trigger: 'blur'}
                    ],
                    rzLx: [
                        {required: true, message: '请选择日志类型', trigger: 'blur'}
                    ],
                    rzZhuti: [
                        {required: true, message: '请输入日志主题', trigger: 'blur'}
                    ],
                    rzNeirong: [
                        {required: true, message: '输入内容', trigger: 'blur'}
                    ]
                },
                isShow:false,
                options: [{
                    value: '日报',
                    label: '日报'
                }, {
                    value: '周报',
                    label: '周报'
                }, {
                    value: '月报',
                    label: '月报'
                }],
            }
        },
        created:function() {
            //调用圆形方法
            this.yxllk();

        },
        methods: {
            //圆形查询方法
            yx(){
                this.$axios.get("http://localhost:8088/vue/rizhilx",{params:{vv:this.workvalue}})
                    .then(v=>{
                        this.drawBar(v.data)//圆形统计图方法
                    }).catch();
            },

            //圆形统计图下拉框改变事件
            yxllk(v){
                this.yx(v);
            },
            //新增客户投诉
            xzkhts(){
                    this.$confirm('是否确定新增?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        this.$axios.post("http://localhost:8088/vue/addLrizhi",this.ruleForm)
                            .then(()=>{
                                this.$message({
                                    showClose: true,
                                    type: 'success',
                                    message: '新增成功!',
                                });
                                this.$router.push({
                                    path:'/rzb'
                                });
                            }).catch(()=>{
                                this.$message({
                                    showClose: true,
                                    message: '新增失败',
                                    type: 'error'
                                });
                            }
                        )
                    }).catch(() => {
                        this.$message({
                            showClose: true,
                            type: 'info',
                            message: '已取消新增'
                        });
                    });

            },

            //取消
            quxiao(){
                this.isShow=false;
            },
            drawBar(aa){
                this.data1 = [];
                for (let a = 0; a < aa.lei.length; a++) {
                    this.data1.splice(a,0,{
                        value: aa.shul[a],
                        name: aa.lei[a],

                    });
                }
                let elementById = document.getElementById('echartsBarDemo')
                let yuantu = this.$echarts.init(elementById)
                let option = {
                    tooltip: {
                        trigger: 'item',
                        formatter: "{a} <br/>{b} : {c} ({d}%)"
                    },
                    series: [{
                        name: '日志提交分布情况',
                        type: 'pie',
                        radius: '68%',
                        center: ['50%', '50%'],
                        clockwise: false,
                        data: this.data1,
                        label: {
                            normal: {
                                textStyle: {
                                    color: '#999',
                                    fontSize: 14,
                                }
                            }
                        },
                        labelLine: {
                            normal: {
                                show: false
                            }
                        },
                        itemStyle: {
                            normal: {
                                borderWidth: 4,
                                borderColor: '#ffffff',
                            },
                            emphasis: {
                                borderWidth: 0,
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }],
                    color: [
                        '#00acee',
                        '#52cdd5',
                        '#79d9f1',
                        '#a7e7ff',
                        '#c8efff'
                    ],
                    backgroundColor: '#fff'
                };
                yuantu.setOption(option);
            }

        }
    }
</script>

<style scoped>
    .wainew{
        width:100%;
        height:100%;
        background-color: rgb(245, 246, 249);
        position:fixed;
        top:0px;
        left:0px;
        z-index:11;
    }
    .newcontract{
        width:900px;
        height:550px;
        background: white;
        border-radius: 5px;
        border: 1px solid rgba(54, 64, 74, 0.05);
        box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
        margin:50px auto;
        padding:5px;
        text-align: left;
    }
    /*中间主题部分*/
    .el-card__body{
        height: 500px;
        padding: 20px 30px;
    }
    /*表单头*/
    .el-head{
        height: 40px;
        margin-bottom: 20px;
        padding: 0 10px;
    }
    /*新增表单*/
    .portlet-body{
        position: relative;
        width: 850px;
        height: 420px;
        margin-top: 0;
        overflow-x: hidden;
        overflow-y: auto;
        background-color: #fff;
        -webkit-box-flex: 1;
        -ms-flex: 1;
        flex: 1;
    }

    .el-autocomplete{
        width: 355.5px;
        position: relative;
        bottom: 15px;
    }
    .biaoti{
        flex: 1 1 0%;
        font-size: 17px;
        color: rgb(51, 51, 51);
        font-weight: bold;
    }
    .el-icon-close {
        display: block;
        font-size: 24px;
        color: #909399;
        margin-right: -10px;
        cursor: pointer;
        float: right;
    }
    .section-header{
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        padding: 5px 15px;
    }
    .section-mark{
        border-left-color: rgb(35, 98, 251);
        border-left-width: 4px;
        border-left-style: solid;
        border-radius: 2px;
        height: 14px;
    }
    .section-title{
        font-size: 14px;
        color: #333;
        font-weight: 600;
        margin-left: 8px;
        -ms-flex-negative: 0;
        flex-shrink: 0;
    }
    .head{
        width: 1090px;
        margin: 0px auto;
        height: 100px;
    }
    .row{
        width: 100%;
        height: 100%;
        background: white;
        margin: 0px auto;
    }

    .el-table{
        margin: 0px auto;
        border: 1px solid #e6e6e6;
        margin-top: 10px;
        text-align: center;
    }

    .bottom{
        padding-top: 40px;
        text-align: center;
    }

    .search_order {
        padding: 10px 15px;
        margin-left: 700px;
        margin-top: 40px;
    }
    .select{
        margin-top: 40px;
        float: right;
    }
    .cell{
        padding-left: 0px;

    }
    .bao{
        width: 1120px;
        height: 200px;
        font-size: 25px;
    }
</style>